<#include "../common/layout/__mainlayout.html">
    <#include "../common/__pagination.html">
        <!--设置面包屑-->
        <#assign pageBreadCrumbs>
            <li class="active"><a href="#">文件管理</a></li>
            <li class="active">文件上传</li>
        </#assign>

        <#assign pageCss>
            <!-- page specific plugin styles -->
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/jquery-ui.custom.css"/>
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/dropzone.css"/>
        </#assign>
        <#assign pageJavascript>
            <script src="${ctx}/static/admin/assets/js/dropzone.js"></script>
            <!-- inline scripts related to this page -->
            <script type="text/javascript">
                jQuery(function ($) {
                    try {
                        Dropzone.autoDiscover = false;
                        var myDropzone = new Dropzone("#uploader", {
                            paramName: "file", // The name that will be used to transfer the file
                            maxFilesize: 0.5, // MB

                            addRemoveLinks: true,
                            dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 拖动文件到这里</span> 进行上传 \
                                <span class="smaller-80 grey">(或者点击)</span> <br /> \
                                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
                            ,
                            dictResponseError: '上传文件失败!',

                            //change the previewTemplate to use Bootstrap progress bars
                            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
                        });

                        $(document).one('ajaxloadstart.page', function (e) {
                            try {
                                myDropzone.destroy();
                            } catch (e) {
                            }
                        });

                    } catch (e) {
                        alert('您的浏览器版本过于陈旧，无法支持拖动，请使用点击功能!');
                    }

                });
            </script>
        </#assign>
        <@mainlayout pageCss=pageCss pageJavascript=pageJavascript currentMenu="formFlag-formFileFlag">
        <!-- pageHeader BEGAIN -->
        <div class="page-header">
            <h1>
                上传文件
                <small><i
                        class="ace-icon fa fa-angle-double-right"></i> 拖动文件进行上传
                </small>
            </h1>
        </div>
        <!-- pageHeader END -->

        <!-- pageContent BEGAIN -->
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div>
                    <form action="../dummy.html" class="dropzone" id="uploader">
                        <div class="fallback">
                            <input name="file" type="file" multiple=""/>
                        </div>
                    </form>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <!-- pageContent END -->
    </@mainlayout>